<template>
  <div id="app">
    <el-card id="root" class="box-card">
      <!-- 登录盒子 -->
      <div id="l_box">
        <!-- 表单 -->
        <!-- :model  v-model  数据绑定 -->
        <!-- :rules  prop  数据验证 -->
        <!-- ref  直接调用validate  表单预验证 -->
        <el-form id="login_form" :model="login_userInfo" :rules="loginRules" ref="loginFormRef">
          <!-- 账号区域 -->
          <!-- prop：传入 Form 组件的 model 中的字段 -->
          <el-form-item class="username_box" prop="username">
            <!-- 图标 -->
            <label for="username" class="icon_box">
              <i class="el-icon-user-solid" aria-hidden="true"></i>
            </label>

            <!-- 输入框 -->
            <!-- placeholder：输入框占位文本-->
            <!-- v-model：绑定值 -->
            <!-- autofocus：原生属性，自动获取焦点 -->
            <el-input class="username" placeholder="userName" v-model="login_userInfo.username" autofocus></el-input>
          </el-form-item>


          <!-- 密码区域 -->
          <el-form-item class="password_box" prop="password">
            <!-- 图标 -->
            <label for="password" class="icon_box">
              <i class="el-icon-lock" aria-hidden="true"></i>
            </label>

            <!-- 输入框 -->
            <!-- autocomplete：原生属性，自动补全 -->
            <!-- placeholder：输入框占位文本-->
            <!-- v-model：绑定值 -->
            <el-input type="password" class="password" autocomplete="off" placeholder="password"
              v-model="login_userInfo.password"></el-input>
          </el-form-item>

          <!-- 验证码区域 -->
          <!-- prop：传入 Form 组件的 model 中的字段 -->
          <el-form-item class="code_box" prop="code">
            <!-- 图标 -->
            <label for="code" class="icon_box">
              <i class="fa fa-check-square-o" aria-hidden="true"></i>
            </label>
            <el-row>
              <el-col :span="14">
                <el-input class="code" placeholder="code" v-model="login_userInfo.code" style="width: 180px"></el-input>
              </el-col>
              <el-col :span="10">
                <div @click="refreshCode">
                  <sIdentify :identifyCode="identifyCode"></sIdentify>
                </div>
              </el-col>
            </el-row>
          </el-form-item>

          <!-- 按钮区域 -->
          <el-form-item class="btn_box">
            <!-- type：类型：primary / success / warning / danger / info / text -->
            <button class="primary" @click.prevent="login">登 录</button>
            <br />
            <button id="toRegister" @click.prevent="toregister">注 册</button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 注册盒子 -->
      <div id="r_box">
        <el-form id="register_form" :model="register_userInfo" :rules="registerRules" ref="registerFormRef">
          <!-- 用户名 -->
          <!-- prop：传入 Form 组件的 model 中的字段 -->
          <el-form-item class="username_box" prop="userName">
            <!-- 图标 -->
            <label for="username" class="icon_box">
              <i class="el-icon-user-solid" aria-hidden="true"></i>
            </label>

            <!-- 输入框 -->
            <!-- placeholder：输入框占位文本 -->
            <!-- v-model：绑定值 -->
            <!-- autofocus：原生属性，自动获取焦点 -->
            <el-input class="username" placeholder="请输入用户名…" v-model="register_userInfo.userName" autofocus></el-input>
          </el-form-item>

          <!-- 手机号区域 -->
          <el-form-item class="tel_box" prop="phone">
            <!-- 图标 -->
            <label for="phone" class="icon_box">
              <i class="el-icon-phone" aria-hidden="true"></i>
            </label>
            <!-- 输入框 -->
            <el-input id="phone" placeholder="请输入手机号…" v-model="register_userInfo.phone"></el-input>
          </el-form-item>

          <!-- 密码区域 -->
          <el-form-item class="password_box" prop="password">
            <!-- 图标 -->
            <label for="password" class="icon_box">
              <i class="el-icon-lock" aria-hidden="true"></i>
            </label>
            <!-- 输入框 -->
            <!-- autocomplete：原生属性，自动补全 -->
            <!-- placeholder：输入框占位文本 -->
            <!-- v-model：绑定值 -->
            <el-input type="password" class="password" autocomplete="off" placeholder="请输入6-16位密码…"
              v-model="register_userInfo.password"></el-input>
          </el-form-item>

          <!-- 重复密码区域 -->
          <el-form-item class="repassword_box" prop="repassword">
            <!-- 图标 -->
            <label for="repassword" class="icon_box">
              <i class="el-icon-lock" aria-hidden="true"></i>
            </label>
            <!-- 输入框 -->
            <!-- autocomplete：原生属性，自动补全 -->
            <!-- placeholder：输入框占位文本 -->
            <!-- v-model：绑定值 -->
            <el-input type="password" id="repassword" autocomplete="off" placeholder="请确认密码…"
              v-model="register_userInfo.repassword"></el-input>
          </el-form-item>


          <!-- 按钮区域 -->
          <el-form-item id="btn_box">
            <!-- type：类型：primary / success / warning / danger / info / text -->
            <button class="primary" @click.prevent="register">注 册</button>
            <br />
            <button id="returnLogin" @click.prevent="returnLogin">返回登录</button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <div id="logo">
      <img src="../assets/images/logo-2.png" alt="" />
    </div>

    <div id="cover" :style="cover">
      <img src="../assets/images/cover.jpg" alt="" />
    </div>
  </div>
</template>

<script src="../assets/js/lr.js">
</script>

<style scoped src="../assets/css/lr.css">
</style>